<template>
  <div class="modify-dialog">
    <slot> </slot>
    <el-dialog v-bind="dialogOpts" :visible.sync="dialogVisible">
      <Form v-bind="formOpts" v-on="formEvent">
        <template #formBtn>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="onConfirm"> 确 定 </el-button>
          </div>
        </template>
      </Form>
    </el-dialog>
  </div>
</template>

<script>
import modifyMixins from "@/mixins/modifyMixins.vue";
export default {
  emits: ["submit"],
  mixins: [modifyMixins],
  props: {
    modifyTitle: {
      type: String,
      default: "",
    },
    modifyForm: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      dialogWidth: "600px",
    };
  },
  computed: {
    formOpts() {
      const {
        modifyForm: form,
        formKey: key,
        ref,
        labelWidth,
        inline,
        labelPosition,
      } = this;
      return {
        form,
        key,
        ref,
        inline,
        labelWidth,
        labelPosition,
      };
    },
    title() {
      return this.modifyTitle || "编辑";
    },
  },
  methods: {
    onSubmit(form) {
      const { modify, row, submitDoneMsg } = this;
      this.$emit("submit", { modify, row, form, submitDoneMsg });
    },
  },
};
</script>

<style lang="less" scoped></style>
